/**
* 供应商档案
*/
<template>
    <vp-main-page @refresh="loadDataList">
        <template #search>
            <el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
                label-width="120px">
                <vp-search-row :show-more="showMore">
                    <vp-search-col>
                        <el-form-item prop="bb">
                            <template #label><vp-label zh="版本" en="Rev." /></template>
                            <el-select class="w100" v-model="searchForm.bb" clearable collapse-tags>
                                <el-option :value="1" label="生效/Effect"></el-option>
                                <el-option :value="2" label="最新/Latest"></el-option>
                            </el-select>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col>
                        <el-form-item prop="gysbm">
                            <template #label><vp-label zh="编号" en="Number" /></template>
                            <el-input v-model="searchForm.gysbm" v-trim placeholder="" clearable></el-input>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col>
                        <el-form-item prop="gysmc">
                            <template #label><vp-label zh="名称" en="Name" /></template>
                            <el-input v-model="searchForm.gysmc" v-trim placeholder="" clearable></el-input>
                        </el-form-item>
                    </vp-search-col>

                    <vp-search-col>
                        <el-form-item prop="tagList">
                            <template #label><vp-label zh="标签" en="label" /></template>
                            <VpDictSelectMulit :lxid="502" :selectedId="searchForm.tagList"
                                @dictMulitSelected="dicts => { searchForm.tagList = dicts }" class="w100" />
                        </el-form-item>
                    </vp-search-col>

                    <vp-search-col>
                        <el-form-item prop="ztList">
                            <template #label><vp-label zh="状态" en="Status" /></template>
                            <el-select class="w100" v-model="searchForm.ztList" multiple collapse-tags>
                                <el-option :value="10" label="保存 Save"></el-option>
                                <el-option :value="88" label="审批中 Processing"></el-option>
                                <el-option :value="89" label="已审批 Processed"></el-option>
                                <el-option :value="98" label="作废 Invalid"></el-option>
                            </el-select>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col>
                        <el-form-item :label-width="120" prop="showSqYj">
                            <el-checkbox v-model="searchForm.showSqYj" :true-value="10" :false-value="0">
                                <vp-label zh="仅看授权预警数据" en="" />
                            </el-checkbox>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col>
                        <el-form-item :label-width="120" prop="showZsYj">
                            <el-checkbox v-model="searchForm.showZsYj" :true-value="10" :false-value="0">
                                <vp-label zh="仅看证书预警数据" en="" />
                            </el-checkbox>
                        </el-form-item>
                    </vp-search-col>

                    <vp-search-col btn-col>
                        <vp-btn-search :loading="loading" @click="loadDataList" />
                        <vp-btn-reset @click="handleSearchReset" />
                        <vp-btn-more @change="showMore = $event" />
                    </vp-search-col>
                </vp-search-row>
            </el-form>
        </template>
        <template #actions>
            <vp-btn-add v-auth="'qualitySupplier.edit'" @click="handleAdd" />
        </template>
        <template #table>
            <vp-vxe-table id="baseDataModel" ref="tableRef" :data="tableData" row-key="id" v-loading="loading">
                <vxe-column type="seq" align="center" title="#" width="50" />
                <vxe-column field="zt" show-overflow width="100">
                    <template #header><vp-label zh="状态" en="Status" /></template>
                    <template #default="scope">
                        {{
                            scope.row.zt === 10 ? '草稿 Draft' :
                                scope.row.zt === 88 ? '审批中 Processing' :
                                    scope.row.zt === 89 ? '生效/Effect' :
                                        scope.row.zt === 98 ? '作废 Invalid' : ''
                        }}
                    </template>
                </vxe-column>
                <vxe-column field="gysbm" title="编号" show-overflow width="180">
                    <template #header><vp-label zh="编号" en="Number" /></template>
                    <template #default="scope">
                        <span>{{ scope.row.gysbm }}</span>
                        <el-tag class="ml10" type="info" round effect="dark" title="最新 Newest"
                            v-if="!scope.row.bBbid && (scope.row.zxbs == 2 || (scope.row.zxbs == 1 && scope.row.zt === 88))">
                            <SvgIcon name="ele-Clock" />
                        </el-tag>
                        <el-tag class="ml10" type="success" round effect="dark" title="生效 Effective"
                            v-if="scope.row.zxbs === 2 && scope.row.zt == 89">
                            <SvgIcon name="ele-Check" />
                        </el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="gysmc" title="名称(中)" show-overflow>
                    <template #header><vp-label zh="名称(中)" en="Name CN." /></template>
                </vxe-column>
                <vxe-column field="gysywmc" title="名称(英)" show-overflow>
                    <template #header><vp-label zh="名称(英)" en="Name EN." /></template>
                </vxe-column>
                <vxe-column field="jb" title="级别" show-overflow>
                    <template #header><vp-label zh="级别" en="LV." /></template>
                </vxe-column>
                <vxe-column field="bqydm" title="本地企业代码" show-overflow>
                    <template #header><vp-label zh="本地企业代码" en="Enterprise Code" /></template>
                </vxe-column>
                <vxe-column field="yxqJs" title="授权有效期" show-overflow>
                    <template #header><vp-label zh="授权有效期" en="Authorization validity" /></template>
                </vxe-column>
                <vxe-column field="yxq" title="证书有效期" show-overflow>
                    <template #header><vp-label zh="证书有效期" en="Validity certificate" /></template>
                </vxe-column>

                <vxe-column field="operation" title="操作 Operations" fixed="right" width="160">
                    <template #header><vp-label-operations /></template>
                    <template #default="scope">
                        <el-space>
                            <vp-btn-edit text v-auth="'qualitySupplier.edit'" v-if="scope.row.zt === 10"
                                @click="handleEdit(scope.row)" />
                            <vp-btn text v-auth="'qualitySupplier.edit'" v-if="scope.row.zxbs === 2 && !scope.row.bBbid"
                                @click="handleRevision(scope.row)">
                                <vp-label zh="修订" en="Revision" />
                            </vp-btn>
                            <vp-btn-view text @click="handleView(scope.row)" />

                            <vp-btn-del text v-auth="'qualitySupplier.edit'" v-if="scope.row.zt === 10"
                                @click="handleDelete(scope.row)" />
                        </el-space>
                    </template>
                </vxe-column>
            </vp-vxe-table>
        </template>
        <template #pagination>
            <vp-pagination @change="loadDataList" :total="page.total" v-model:currentPage="page.pageNum"
                v-model:pageSize="page.pageSize">
            </vp-pagination>
        </template>

        <EditQualitySupplier ref="editQualitySupplierRef" @formSubmited="handleFormSubmited">
        </EditQualitySupplier>

        <RevisionQualitySupplier ref="revisionQualitySupplier" @formSubmited="handleFormSubmited"></RevisionQualitySupplier>

    </vp-main-page>
</template>

<script setup lang="ts" name="qualitySupplierList">
import { ref, reactive, onMounted, defineAsyncComponent } from 'vue';
import request from '/@/utils/request';
import { DEFAULT_PAGE } from '/@/utils/page';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import router from '/@/router';
const EditQualitySupplier = defineAsyncComponent(() => import('./component/workflows/EditQualitySupplier.vue'));
const RevisionQualitySupplier = defineAsyncComponent(() => import('./component/workflows/RevisionQualitySupplier.vue'));


import VpDictSelectMulit from '/@/components/vp/dict/VpDictSelectMulit.vue';

const searchForm = reactive({
    bb: "",
    gysbm: "",
    ztList: [],
    tagList: [],
    gysmc: '',
    showSqYj:null,
    showZsYj:null,
});

const page = reactive({
    ...DEFAULT_PAGE,
})


const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

// 加载列表数据
const loadDataList = () => {
    loading.value = true;
    request.get('/quality/supplier/pageList', {
        params: {
            ...searchForm,
            ...page
        }
    }).then(res => {
        tableData.value = res?.data?.list || []
        page.total = res?.data?.total || 0
        page.pageNum = res?.data?.pageNum || 1;
    }).finally(() => {
        loading.value = false
    })
}

const searchFormRef = ref();

// 重置搜索条件
const handleSearchReset = () => {
    searchForm.bb = '';
    searchForm.gysbm = "";
    searchForm.ztList = [];
    searchForm.tagList = [];
    searchForm.gysmc = '';
    searchForm.showSqYj = null;
    searchForm.showZsYj = null;

    loadDataList()
}


// 组件挂载后事件
onMounted(() => {
    loadDataList();
})


// 查看
const handleView = (row: any) => {
    router.push({
        name: "viewQualitySupplier",
        params: {
            id: row.id
        },
    })
}

const editQualitySupplierRef = ref()

const handleFormSubmited = () => {
    loadDataList()
}
const handleAdd = () => {
    editQualitySupplierRef.value.handleOpen({
        type: 'add'
    });
}

const handleEdit = (row: any) => {
    editQualitySupplierRef.value.handleOpen({
        type: 'edit',
        id: row.id
    });
}

//修订
const revisionQualitySupplier=ref()
const handleRevision= (row: any) => {
    revisionQualitySupplier.value.handleOpen({
        type: 'edit',
        id: row.id
    });
}


// 删除
const handleDelete = (row: any) => {
    VpMessageBox.confirmDelete().then(() => {
        request.delete(`/quality/supplier/${row.id}`).then(res => {
            loadDataList();
        })
    });
}
</script>

<style lang="scss" scoped></style>